import React,{Component}  from 'react';
import {connect} from 'react-redux';
import {cateList,newsListByCate} from '../actions/about'
var Link=require('react-router').Link;
import Moment from 'react-moment';

class About extends Component{
    constructor() {
        super();
        this.state = {
            dataSource: ""
        };
    }
    componentWillMount(){
        this.props.cateList();
        this.props.newsListByCate();
    }
    changePage(e){
        const page = e.target.getAttribute('data-page');
        const cateId=this.state.dataSource;
        const params = "page="+page;
        this.props.newsListByCate(params);
    }
    change(e){
        const cateId=e.target.getAttribute('data-cateId');
        const params="categoryId="+cateId;
        this.props.newsListByCate(params);
        this.setState({dataSource:params});
    }
    render(){
        const {catelist,cateList,newslist,newsListByCate,location} = this.props;
        var leftNews=newslist.rows;
        var showData=[];
        var leftNewsDate=[];
        var vm = this;
        function search(){
            const params="title="+vm.refs.searchValue.value;
            vm.props.newsListByCate(params);
            leftNewsDate=[];
        }
        {/*导航栏*/}
        if(catelist.length>0){
            var colList = [];
            var len=catelist.length;
            for(var i=0;i<len;i++){
                colList.push(
                    <li key={i} ><a href="javascript:void(0)" onClick={ (e)=>this.change(e)}  data-cateId={catelist[i]._id} data-page={i}>{catelist[i].title}</a></li>
                )
            }
            showData=colList;
        }
        {/*新闻列表*/}
        if(leftNews){
            var newList=[];
            var len=leftNews.length;
            for(var i=0;i<len;i++){
               var imgPath="http://localhost:3000/"+leftNews[i].img.filename;
               newList.push(
                <div className="media" key={i}>
                    <div className="media-left">
                        <Link to={ {pathname:'/about/'+leftNews[i]._id}}><img className="media-object" data-src="holder.js/64x64" alt="64x64" src={imgPath} data-holder-rendered="true"/></Link>
                    </div>
                    <div className="media-body">
                        <h4 className="media-heading"><Link to={ {pathname:'/about/'+leftNews[i]._id}}>{leftNews[i].title}</Link></h4>
                        <Link to={ {pathname:'/about/'+leftNews[i]._id}}><p id='content' dangerouslySetInnerHTML={{__html: leftNews[i].content}}></p></Link>
                    </div>
                    <div className="media-right">
                        <span className="top"><Link to={ {pathname:'/about/'+leftNews[i]._id}}><i className="glyphicon glyphicon-comment"></i>&nbsp;&nbsp;{leftNews[i].commentCount}条</Link></span>
                        <span className="bot"><Moment format="YYYY-MM-DD">{leftNews[i].releaseTime}</Moment></span>
                    </div>
                </div>
                )

            }
            leftNewsDate=newList;
        }
        {/*分页*/}
        var outputPages = [];
        if(leftNews){
            var len=newslist.pages;
            for(var i=1;i<=len;i++){
                outputPages.push(
                    <li key={i}><a href="javascript:void(0)" onClick={ (e)=>this.changePage(e) } data-page={i} >{i}</a></li>
                )
            }
        }
        return (
            <div id="newsCenter">
                {/* 导航 */}
                <div className="bs-example" data-example-id="default-navbar">
                    <nav className="navbar navbar-default">
                        <div className="container-fluid">
                            <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul className="nav navbar-nav">
                                    {showData}
                                </ul>
                                <form className="navbar-form navbar-left">
                                    <div className="form-group">
                                        <input type="text" ref='ipt' className="form-control" placeholder="Search"  ref="searchValue"/>
                                    </div>
                                    <button type="submit" className="btn btn-default" onClick={search}>搜索</button>
                                </form>
                            </div>
                        </div>
                    </nav>
                </div>
                {/* 主体 */}
                <div className="row">
                    {/*新闻列表 */}
                    {leftNewsDate}
                    {/*分页*/}
                    <nav aria-label="..." id="pageNav">
                        <ul className="pagination" id="pageUl">
                            {outputPages}
                        </ul>
                    </nav>
                </div>
            </div>
        )
    }
}
const getValue = (state)=>{
    return {
        catelist: state.about.catelist,
        newslist: state.about.newslist,
    }
}
const AboutShow = connect(getValue,{cateList,newsListByCate})(About)
module.exports = AboutShow;